Vue3 双向绑定

在 Vue3 中实现双向绑定非常简单，以下记录一下我的经历：

// 在父组件中
  <Dialogue v-model="visible"></Dialogue>

如果你在父组件中像这样使用 v-model，在 Dialogue 子组件中，你需要使用 modelValue 来读取变量，如果直接在子组件使用visible来读取v-model的值，很可惜无法做到。

如果你想在子组件中使用重命名过的v-model变量，你必须像如下这样声明 v-model：

// 在父组件中
  <Dialogue v-model:visible="visible"></Dialogue>

然后重命名的变量就可以正常使用

export default {
  components: {
    Button
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible'],
  setup(props, context) {
    const close = () => {
      context.emit('update:visible', false)
    }
    return {
      close
    }
  }
}